<!-- 新增修改弹窗 -->
<template>
  <el-dialog v-model="visible" :title="title" class="list-cu-dialog" destroy-on-close>
    <el-form class="cu-form" ref="formRef" :model="form.data" :rules="rules" label-width="90px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.data.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.data.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="个人描述" prop="content">
        <el-button type="primary" @click="openEditContent">编辑个人描述</el-button>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <div style="width: 100%; height: 200px;">
          <UploadFile
            v-model="form.data.avatar"
            ref="uploadFileRef"
          />
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="form.data.note" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="form.loading" @click="onSubmit">提交</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="richtext.visible" title="编辑富文本" fullscreen modal-append-to-body>
    <div class="edit-richtext" style="height: calc(100vh - 54px - 60px);">
      <RichText ref="richTextRef" v-model="form.data.content" height="100%" />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { createOrUpdateApi } from '@/global/api/test';
import RichText from '@/components/rich-text/index.vue'
import UploadFile from '@/components/base-ui/upload/UploadFile.vue'

const emits = defineEmits(["success"])

const uploadFileRef = ref<InstanceType<typeof UploadFile>>()
/** 弹窗信息 */
const title = ref('新增')
const visible = ref<boolean>(false)
/**
 * 打开弹窗
 */
const open = (type: 'update' | 'create', data?: any) => {
  visible.value = true
  form.data = {
    name: '',
    phone: '',
    note: '',
    content: ''
  }
  if (type === 'create') {
    title.value = '新增'
  } else if (type === 'update') {
    title.value = '修改'
    form.data = JSON.parse(JSON.stringify(data))
  }
}
/**
 * 关闭弹窗
 */

/** 表单信息 */
const form = reactive({
  data: {} as KeyValue,
  loading: false
})
const rules = {
  name: [{ required: true, message: '请输入名称！' }],
  phone: [{ required: true, message: '请输入手机号！' }],
  content: [{ required: true, message: '请输入个人描述！' }]
}

// 关闭弹窗
const close = () => {
  visible.value = false
}
/**
 * 提交表单信息
 */
const formRef = ref<FormInstance>()
const onSubmit = () => {
  formRef.value?.validate((result: boolean) => {
    if (result) {
      form.loading = true
      let sendData = JSON.parse(JSON.stringify(form.data))
      createOrUpdateApi(sendData).then(() => {
        uploadFileRef.value?.trueToDelete()
        close()
        ElMessage.success({ message: '操作成功！' })
        emits("success")
      }).finally(() => {
        form.loading = false
      })
    }
  })
}


/** 富文本 */
const richtext = reactive({
  visible: false
})
const richTextRef = ref<InstanceType<typeof RichText>>()
// 打开弹窗
const openEditContent = () => {
  richtext.visible = true
}
// 关闭弹窗
const closeEditContent = () => {
  richtext.visible = false
}

defineExpose({ open })
</script>
<style scoped lang="scss">
</style>
<style lang="scss">
  .list-cu-dialog {
    min-width: 390px;
    max-width: 600px;
  }
</style>

